<template>
  <div class="home d-flex flex-column my-container">
    <div class="col d-flex rounded-lg">
      <div style="width: 40%;" class="d-flex flex-column shadow p-3 mr-3 rounded-lg">
        <div class="d-flex justify-content-between">
          <div class="font-weight-normal font-16 titile d-flex align-items-center">设备故障趋势</div>
          <div>
            <el-button style="font-size: 18px;" type="text" icon="el-icon-right" @click="toDetail(0)"></el-button>
          </div>
        </div>
        <div class="col d-flex flex-column over-auto">
          <div class="col p-2">
            <div class="col shadow rounded-lg h-100">
              <div style="height: 100%;width:100%;padding: 3%;">
                <div id="chart-one" class="my_chart"></div>
              </div>
            </div>
          </div>
          <div class="mb-3 mt-3 d-flex justify-content-between">
            <div class="font-weight-normal font-16 titile d-flex align-items-center">设备告警趋势</div>
            <div>
              <el-button style="font-size: 18px;" type="text" icon="el-icon-right" @click="toDetail(1)"></el-button>
            </div>
<!--            <div class="font-weight-normal font-16 titile">设备告警趋势</div>-->
          </div>
          <div class="col p-2">
<!--            <div class="font-weight-normal font-16 titile">设备告警趋势</div>-->
            <div class="col shadow rounded-lg h-100">
              <div style="height: 100%;width:100%;padding: 3%;">
                <div id="chart-two" class="my_chart"></div>
              </div>
<!--              <el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">-->
<!--                <el-table-column type="index" label="序号" width="80" align="center"/>-->
<!--                <el-table-column prop="deviceName" label="设备名称" align="center"/>-->
<!--                <el-table-column prop="gzDes" label="故障类型" align="center"/>-->
<!--                <el-table-column prop="createTime" label="异常时间" align="center">-->
<!--                  <template slot-scope="scope">-->
<!--                    {{ scope.row.createTime }}-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->
            </div>
          </div>
        </div>
      </div>
      <div class="col d-flex flex-column shadow p-3 rounded-lg">
        <div class="mb-3 d-flex justify-content-between">
<!--          <div class="font-weight-normal font-16 titile">应用场景监控异常</div>-->
          <div class="font-weight-normal font-16 titile d-flex align-items-center">应用场景监控异常</div>
          <div>
            <el-button style="font-size: 18px;" type="text" icon="el-icon-right" @click="toDetail(2)"></el-button>
          </div>
        </div>
        <div class="col d-flex over-auto">
          <div class="abnormal-content">
            <div class="abnormal-item shadow mb-3" v-for="(item,index) in abnormalList" :key="item.applicationCode">
              <div class="abnormal-item-title">
                <div class="status-point m-2"></div>
                <div class="font-weight-bold">{{item.applicationName}}</div>
              </div>
              <div class="abnormal-item-content p-2">
                <div class="con-img d-flex justify-content-center align-items-center">
                  <el-image
                    style="border-radius: 24px;"
                    :src="item.applicationPic"
                    fit="scale-down"></el-image>
                </div>
                <div class="con-main d-flex flex-column justify-content-center ml-2">
                  <el-row class="mb-3">
                    <el-col :span="14">
                      <div class="titile">系统已解决异常数量：<span class="font-18" style="color: #FF6D6D;font-family: DIN;">{{ item.sysSettleTotal }}</span>
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <div class="titile">系统异常总数：<span class="font-18" style="color: #1890FF;font-family: DIN;">{{ item.sysAbnormalTotal }}</span>
                      </div>
                    </el-col>

                  </el-row>
                  <!--                  <el-row>-->
                  <!--                    <el-col :span="24">-->
                  <!--                      <div class="titile">今日已解决异常数量：<span class="font-16" style="color: #FF6D6D;">{{ item.toDaySettleNum }}</span>-->
                  <!--                      </div>-->
                  <!--                    </el-col>-->
                  <!--                  </el-row>-->
                  <el-row>
                    <el-col :span="14">
                      <div class="titile">今日已解决异常数量：<span class="font-18" style="color: #FF6D6D;font-family: DIN;">{{ item.toDaySettleNum }}</span>
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <div class="titile">今日异常数量：<span class="font-18" style="color: #1890FF;font-family: DIN;">{{ item.toDayAbnormalNum }}</span>
                      </div>
                    </el-col>
                  </el-row>
                  <!--                  <el-row class="mb-2">-->
                  <!--                    <el-col :span="24">-->
                  <!--                      <div class="titile">今日异常数量：<span class="font-16" style="color: #1890FF;">{{ item.toDayAbnormalNum }}</span>-->
                  <!--                      </div>-->
                  <!--                    </el-col>-->
                  <!--                  </el-row>-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from "@/views/newSystem/showManage/monitoringCenter/chart.js"
  import {
    queryPageApplicationScenarios,
    queryPageDDeviceGZMainByTime,
    dDeviceGZMainZX,
    DDeviceGJMainZX
  } from "@/api/showManage/index"
  import ycDialog from "@/components/pageDialog"

  export default {
    data() {
      return {
        tableData: [],

        page: {
          pageIndex: 1,
          pageSize: 20
        },
        loading: false,
        abnormalList: []
      }
    },
    components: {
      ycDialog
    },
    created() {
      this.queryPageDDeviceGZMainByTime()
      this.queryPageApplicationScenarios()
    },
    mounted() {
      this.dDeviceGZMainZX()
      this.DDeviceGJMainZX()
    },
    methods: {
      // charts.lineEchart(res.object)
      // onSearch() {
      //   this.queryPageDDeviceGZMainByTime()
      // },
      toDetail(index) {
        this.$router.push({
          path: "/monitoringCenter/monitoringCenterDetail",
          query: {index: index}
        })
      },
      queryPageDDeviceGZMainByTime() {
        this.loading = true
        queryPageDDeviceGZMainByTime().then(res => {
          if (res.status == "200") {
            this.tableData = res.object
            // this.pageData.total = res.object.count
          }
        }).finally(() => {
          this.loading = false
        })
      },
      pagination(pageItem) {
        this.getAccountData(pageItem.page, pageItem.limit)
      },
      dDeviceGZMainZX() {
        dDeviceGZMainZX().then(res => {
          if (res.status == "200") {
            let data = res.object
            // data[0].valueData.val = data[0].valueData.data
            let obj = {
              name: 'chart-one',
              xData: [],
              valueData: []
            }
            obj.valueData.push(data[0].valueData)
            obj.xData = data[0].xData
            charts.columnarEchart(obj)
          }
        }).finally(() => {
        })
      },
      DDeviceGJMainZX() {
        DDeviceGJMainZX().then(res => {
          if (res.status == "200") {
            let data = res.object
            // data[0].valueData.val = data[0].valueData.data
            let obj = {
              name: 'chart-two',
              xData: [],
              valueData: []
            }
            obj.valueData.push(data[0].valueData)
            obj.xData = data[0].xData
            charts.columnarEchart(obj)
          }
        }).finally(() => {
        })
      },
      queryPageApplicationScenarios() {
        queryPageApplicationScenarios(this.page).then(res => {
          if (res.status == "200") {
            this.abnormalList = res.object.data
            // this.pageData.total = res.object.count
          }
        }).finally(() => {
        })
      },
      dialogSave() {
      },
      /**
       * 刷新
       */
      refresh() {
        this.loading = true
        this.queryPageDDeviceGZMainByTime()
      },
      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      },
      async messageBoxSave(show) {
        this.messageBoxSaveShow = show
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .my_chart {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
  }

  .abnormal-content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
    width: 100%;

    .abnormal-item {
      width: 47%;
      height: 150px;
      border-radius: 7px;
      margin-right: 1.2%;
      margin-left: 1.1%;
      overflow: hidden;

      .abnormal-item-title {
        display: flex;
        align-items: center;
        height: 35px;
        width: 100%;
        background-color: #E6F3FF;

        .status-point {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #CF97FB;
        }
      }

      .abnormal-item-content {
        display: flex;
        align-items: center;
        height: calc(100% - 35px);
        /*background-color: #f4f4f4;*/

        .con-img {
          width: 80px;
          height: 80px;;
        }

        .con-main {
          height: 80px;
          width: calc(100% - 80px);

          .titile {
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
          }
        }
      }
    }


  }
</style>
